<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">

	<title>搜索页面</title>

	<link href="../AmazeUI-2.4.2/assets/css/amazeui.css" rel="stylesheet" type="text/css" />
	<link href="../AmazeUI-2.4.2/assets/css/admin.css" rel="stylesheet" type="text/css" />

	<link href="../basic/css/demo.css" rel="stylesheet" type="text/css" />

	<link href="../css/seastyle.css" rel="stylesheet" type="text/css" />

</head>

<body>

<!--顶部导航条 -->
<div class="am-container header">
	<ul class="message-l">
		<div class="topMessage">
			<div class="menu-hd">
				<a href="#" target="_top" class="h">亲，请登录</a>
				<a href="#" target="_top">免费注册</a>
			</div>
		</div>
	</ul>
	<ul class="message-r">
		<div class="topMessage home">
			<div class="menu-hd"><a href="#" target="_top" class="h">商城首页</a></div>
		</div>
		<div class="topMessage my-shangcheng">
			<div class="menu-hd MyShangcheng"><a href="#" target="_top"><i class="am-icon-user am-icon-fw"></i>个人中心</a></div>
		</div>
		<div class="topMessage mini-cart">
			<div class="menu-hd"><a id="mc-menu-hd" href="#" target="_top"><i class="am-icon-shopping-cart  am-icon-fw"></i><span>购物车</span><strong id="J_MiniCartNum" class="h">0</strong></a></div>
		</div>
		<div class="topMessage favorite">
			<div class="menu-hd"><a href="#" target="_top"><i class="am-icon-heart am-icon-fw"></i><span>收藏夹</span></a></div>
		</div>
	</ul>
</div>

<!--悬浮搜索框-->

<div class="nav white">
	<div class="logo"><img src="../images/logo.png" /></div>
	<div class="logoBig">
		<li><img src="../images/logobig.png" /></li>
	</div>

	<div class="search-bar pr">
		<a name="index_none_header_sysc" href="#"></a>
		<form action="/search">
			<input id="searchInput" name="searchMsg" type="text" placeholder="搜索" value="${searchMsg}" autocomplete="off">
			<input id="ai-topsearch" class="submit am-btn"  value="搜索" index="1" type="submit">
		</form>
	</div>
</div>

<div class="clear"></div>
<b class="line"></b>
<div class="search">
	<div class="search-list">
		<div class="nav-table">
			<div class="long-title"><span class="all-goods">全部分类</span></div>
			<div class="nav-cont">
				<ul>
					<li class="index"><a href="#">首页</a></li>
					<li class="qc"><a href="#">闪购</a></li>
					<li class="qc"><a href="#">限时抢</a></li>
					<li class="qc"><a href="#">团购</a></li>
					<li class="qc last"><a href="#">大包装</a></li>
				</ul>
				<div class="nav-extra">
					<i class="am-icon-user-secret am-icon-md nav-user"></i><b></b>我的福利
					<i class="am-icon-angle-right" style="padding-left: 10px;"></i>
				</div>
			</div>
		</div>


		<div class="am-g am-g-fixed">
			<div class="am-u-sm-12 am-u-md-12">
				<div class="theme-popover">
					<div class="searchAbout">

					</div>
					<ul class="select">
						<div class="clear"></div>
						<li class="select-list">
							<dl id="select1">
								<dt class="am-badge am-round">品牌</dt>

								<div class="dd-conent" title="">
									<dd class="select-all selected"><a href="0">全部</a></dd>
									<c:forEach items="${brands}" var="brand">
										<dd><a href="${brand.brandId}">${brand.brandName}</a></dd>
									</c:forEach>
								</div>

							</dl>
						</li>
						<li class="select-list">
							<dl id="select2">
								<dt class="am-badge am-round">种类</dt>
								<div class="dd-conent" title="">
									<dd class="select-all selected"><a href="0">全部</a></dd>
									<c:forEach items="${kinds}" var="kind">
										<dd><a href="${kind.kindId}">${kind.kindName}</a></dd>
									</c:forEach>
								</div>
							</dl>
						</li>
					</ul>
					<div class="clear"></div>
				</div>
				<div class="search-content">
					<div class="sort">
						<li class="first"><a title="综合">综合排序</a></li>
						<li><a title="销量">销量排序</a></li>
						<li><a title="价格">价格优先</a></li>
					</div>
					<div class="clear"></div>

					<ul class="am-avg-sm-2 am-avg-md-3 am-avg-lg-4 boxes">
					</ul>
				</div>
				<div class="clear"></div>
				<!--分页 -->
				<ul class="am-pagination am-pagination-right">
					<li><a href="1">首页</a></li>
					<li><a href="#">上一页</a></li>
					<li><a href="#">下一页</a></li>
					<li><a href="#">尾页</a></li>
					第&nbsp;<span id="currPageNo">1</span>&nbsp;页&nbsp;/&nbsp;共&nbsp;<span id="totalPage">6</span>&nbsp;页（<span id="totalCount">16</span>条）
				</ul>

			</div>
		</div>
		<div class="footer">
			<div class="footer-hd">
				<p>
					<b>|</b>
					<a href="# ">商城首页</a>
					<b>|</b>
					<a href="# ">支付宝</a>
					<b>|</b>
					<a href="# ">物流</a>
				</p>
			</div>
			<div class="footer-bd ">
				<p>
					<a href="# ">合作伙伴</a>
					<a href="# ">联系我们</a>
					<a href="# ">网站地图</a>
				</p>
			</div>
		</div>
	</div>

</div>

<script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-3.4.1.min.js"></script>
<script type="text/javascript" src="../js/script.js"></script>
<script type="text/javascript">
$(function () {
	var brandId=0;
	var kindId=0;
	var currPageNo=1;
	var searchMsg=$("#searchInput").val();
	selectByCategory();
	function selectByCategory(){
		/**
		 * 获取商品列表
		 */
		$.getJSON("/searchByCategory",{"searchMsg":searchMsg,"brandId":brandId,"kindId":kindId,"currPageNo":currPageNo},function (data) {
			var contextMsg="";
			if (data==""){
				contextMsg="<p align='center' style='font-size: 30px'>抱歉没有查到相关商品信息！！</p>";
			}
			$(data).each(function () {
				contextMsg+="<li>" +
						"<a href='toProductInfo?productId="+this.productId+"'>" +
						"<div class='i-pic limit'>" +
						"<img src='"+this.pictureUrl+"'>" +
						"<p class='title f1'>"+this.productName+
						"</p>" +
						"<p class='price f1'><b>¥</b>" +
						"<strong>"+this.price+
						"</strong></p>" +
						"<p class='number fl'>销量<span>" +this.totalSales+
						"</span></p>" +
						"</div>" +
						"</a>" +
						"</li>";
			})
			$(".boxes").empty().append(contextMsg);
		})
		$.getJSON("/searchCount",{"searchMsg":searchMsg,"brandId":brandId,"kindId":kindId},function (data) {
			if (data.totalCount==0){
				$(".am-pagination").hide();
			} else {
				$(".am-pagination").show();
				$("#totalCount").text(data.totalCount);
				$("#totalPage").text(data.totalPage);
			}
		})
	}
	$(".am-pagination li:eq(0) a").click(function () {
		currPageNo=$(this).attr("href");
		selectByCategory();
		$("#currPageNo").text(currPageNo);
		return false;
	})
	$(".am-pagination li:eq(1) a").click(function () {
		currPageNo=parseInt($("#currPageNo").text())-1;
		if (currPageNo <= 1){
			currPageNo=1;
		}
		$("#currPageNo").text(currPageNo);
		selectByCategory();
		return false;
	})
	$(".am-pagination li:eq(2) a").click(function () {
		currPageNo=parseInt($("#currPageNo").text())+1;
		if (currPageNo > $("#totalPage").text()){
			currPageNo=$("#totalPage").text();
		}
		$("#currPageNo").text(currPageNo);
		selectByCategory();

		return false;
	})
	$(".am-pagination li:eq(3) a").click(function () {
		currPageNo=$("#totalPage").text();
		selectByCategory();
		$("#currPageNo").text(currPageNo);
		return false;
	})
	$("#select1 dd").click(function() {
		$(this).addClass("selected").siblings().removeClass("selected");
		$("#select1 .dd-conent").attr("title",$(this).find("a").attr("href"));
		brandId=$("#select1 .dd-conent").attr("title");
		selectByCategory();
		return false;
	});
	$("#select2 dd").click(function() {
		$(this).addClass("selected").siblings().removeClass("selected");
		$("#select2 .dd-conent").attr("title",$(this).find("a").attr("href"));
		kindId=$("#select2 .dd-conent").attr("title");
		selectByCategory();
		return false;
	});

	$("#select3 dd").click(function() {
		$(this).addClass("selected").siblings().removeClass("selected");
		return false;
	});

})
</script>
<div class="theme-popover-mask"></div>

</body>
</html>